import EChartsReact from 'echarts-for-react';
import { EChartsOption } from 'echarts';

interface ChartProps {
  series: any[];
  loading?: boolean;
}

const Chart = (props: ChartProps) => {
  const { series = [], loading } = props;

  const option: EChartsOption = {
    title: {
      text: '数据图',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: series.map((v) => v.name),
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'time',
      min: (data) => {
        return data.min - 60000;
      },
      max: (data) => {
        return data.max + 60000;
      },
      name: '日期',
    },
    yAxis: {
      type: 'value',
    },
    series: series,
  };

  return (
    <EChartsReact
      showLoading={loading}
      style={{ height: 500, maxWidth: 1462 }}
      option={option}
    ></EChartsReact>
  );
};

export default Chart;
